<template>
  <div class="main">
    <div class="top">
      <span style="
          color: rgba(255, 255, 0, 1);
          font-size: 16px;
          font-family: Arial;
          line-height: 16px;
          font-weight:700
        ">
        报警源：2020-07-16 特一联 1#调储罐液位过高报警，调储罐溢流进事故池
      </span>
    </div>

    <div class="btn" :style="{'width':width}">
      <button>仪器信息</button>
    </div>

    <div class="main-body">
      <!-- <canvas ref="canvas" id="canvas" :width="width" height="500"></canvas> -->
      <img src="../components/imgs/特一联.png" alt="">
    </div>
    
  </div>
</template>

<script>
export default {

  data() {
    return {
      width:'0'
    }
  },

  mounted() {
    this.width = document.querySelector(".main-body").style.width;
    // console.log(this.width);

    this.init();
  },

  methods: {
    init() {
      
    },
  },
};
</script>

<style scoped>
/* 头部 */
.top{
  width:600px;
  height: 40px;
  background-color: #0b337d;
  padding-left: 30px;
  margin-bottom: 10px;

  color: #ced619;
  line-height: 40px;
  font-size: 1em;
}
/* 按钮 */
.btn{

  position: relative;

  /* background-color: skyblue; */

  margin-bottom: 10px;
  padding-right: 10px;

  text-align: right;
}
/* 主体 */
.main-body{
  width: 100%;
  height: 50%;
  background-image: url(../../assets/background.svg);
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
img{
  width: 100%;
  height: 100%;
}
</style>